<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Proxy</title>
	<link rel="stylesheet" href="js/layui/css/layui.css" />
	<link rel="stylesheet" href="css/layui-blue.css" />
	<script type="text/javascript" src="js/layui/layui.all.js" ></script>
	<script type="text/javascript" src="js/common.js" ></script>
	<style type="text/css">
		html,body{
			width:100%;
		}
		.layui-form{
			width : 700px;
			margin-top:10px;
		}
		.layui-form-label{
			width : 140px;
		}
		.layui-input-block{
			margin-left : 170px;
		}
		.btns-submit{
			text-align : center;
		}
	</style>
</head>
<body>
	<form class="layui-form" autocomplete="off" lay-filter="form">
		<div class="layui-form-item">
   			<label class="layui-form-label">代理 IP</label>
   			<div class="layui-input-block">
   				<input type="text" name="ip" placeholder="请输入代理 IP" autocomplete="off" class="layui-input" lay-verify="required"/>
   			</div>
   		</div>
		<div class="layui-form-item">
   			<label class="layui-form-label">代理端口号</label>
   			<div class="layui-input-block">
   				<input type="text" name="port" placeholder="请输入代理端口号" autocomplete="off" class="layui-input"  lay-verify="required"/>
   			</div>
   		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">代理类型</label>
			<div class="layui-input-block">
				<select name="type" lay-search  lay-verify="required">
					<option value="http">http</option>
					<option value="https">https</option>
				</select>
			</div>
		</div>
   		<div class="layui-form-item">
   			<label class="layui-form-label">是否高匿</label>
			<div class="layui-input-block">
				<input type="checkbox" title="高匿" name="anonymous" value="true" lay-skin="primary" {{d.data.object['anonymous'] ? 'checked' : ''}}/>
			</div>
   		</div>
   		<div class="btns-submit">
			<button class="layui-btn layui-btn-normal" lay-submit lay-filter="save">保存</button>
			<button class="layui-btn layui-btn-normal" lay-submit lay-filter="test" type="button">测试延迟</button>
			<button class="layui-btn layui-btn-primary btn-return" type="button" onclick="history.go(-1);">返回</button>
		</div>
	</form>
	<script>
		var $ = layui.$;
	</script>
	<script type="text/javascript" src="js/setup.js" ></script>
	<script type="text/javascript">
		layui.use('form', function(){
			var form = layui.form;
			form.render();
			resetSelect();
			addSelectListener();
		});

		// 移除 search 的 blur 事件，作用可以让用户手动输入
		function resetSelect(selValue) {
			// 移除事件
			var driverClassElement = $("select[name='type']").next().find("input");
			driverClassElement.unbind("blur");
			if(selValue){
				driverClassElement.val(selValue);
			}
			return driverClassElement;
		}

		// 添加 search 监听，为了移除它默认选中最后一个
		function addSelectListener() {
			$("select[name='type']").next().find("input").focus(function () {
				window.setTimeout(function() {
					var sourceSelect =  $("select[name='type']").next();
					var selectText = $(sourceSelect).find(".layui-anim-upbit .layui-this");
					var selectVal = $(sourceSelect).find("input").val();
					if (selectVal !== selectText.text()) {
						$(selectText).removeClass("layui-this");
					}
				},100)
			})
		}

		var dsId = getQueryString('id');
		if(dsId){
			$.ajax({
				url : 'proxy/get',
				type: 'get',
				data : {
					id : dsId
				},
				success : function(data) {
					layui.form.val('form', data);
					resetSelect(data.type);
					addSelectListener();
				}
			});
		}
		layui.form.on('submit(save)',function() {
			$.ajax({
				url : 'proxy/save',
				type : 'post',
				data : {
					id : dsId,
					ip : $("input[name=ip]").val(),
					port : $("input[name=port]").val(),
					type : resetSelect().val(),
					anonymous : $("input[name=anonymous]").val()
				},
				success : function(success) {
					if (success) {
						layui.layer.msg('保存成功', {
							time : 800
						},function(){
							location.href = 'proxy.html';
						})
					} else {
						layui.layer.msg('保存失败');
					}
				},
				error : function(){
					layui.layer.msg('请求失败');
				}
			})
			return false;
		})

		layui.form.on('submit(test)', function () {
			$.ajax({
				url : 'proxy/test',
				type : 'get',
				data : {
					ip : $("input[name=ip]").val(),
					port : $("input[name=port]").val(),
					type : resetSelect().val()
				},
				success : function(data) {
					layui.layer.msg("延迟 " + data + " 毫秒");
				},
				error : function(errorInfo) {
					if (errorInfo.responseText !== null && errorInfo.responseText !== '') {
						layui.layer.msg(errorInfo.responseText);
					} else {
						layui.layer.msg('请求失败');
					}
				}
			});
			return false;
		})

	</script>
</body>
</html>